<template>
  <a-card>
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col :sm="24" :md="12" :xl="4" v-for="(item, index) in totalSales" v-bind:key="index">
        <a-card :title="$t('statistic.' + item.type)" :loading="loading">
          <a-statistic :title="$t('statistic.total') + item.currency" :precision="0" :value="item.totalPrice"/>
          <a-statistic :title="$t('statistic.total_orders')" :precision="0" :value="item.totalOrders"/>
          <a-statistic :title="$t('statistic.total_nights_rooms')" :precision="0" :value="item.totalNightsRooms"/>
        </a-card>
      </a-col>
    </a-row>
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col :sm="24" :md="12" :xl="24">
        <a-card :title="$t('statistic.total_30')" :loading="chartLoading">
          <template slot="extra">
            <a-radio-group default-value="total" button-style="solid" @change="chartChange">
              <a-radio-button value="total">
                {{ $t('statistic.total') }}
              </a-radio-button>
              <a-radio-button value="total_orders">
                {{ $t('statistic.total_orders') }}
              </a-radio-button>
              <a-radio-button value="total_nights_rooms">
                {{ $t('statistic.total_nights_rooms') }}
              </a-radio-button>
            </a-radio-group>
          </template>
          <div id="echart" style="height: 400px;"></div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import {getTotalSale, getTotalSaleDaily} from '@/services/statistic'
import * as echarts from 'echarts/core';
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import {BarChart, LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {SVGRenderer} from 'echarts/renderers';
import {mapState} from 'vuex'
import {formatAmount} from "../../utils/formatter";

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  SVGRenderer,
  UniversalTransition
]);

let myChart = null;

export default {
  name: 'Dashboard',
  i18n: require('../i18n'),
  data() {
    return {
      loading: false,
      chartLoading: false,
      totalSales: [
        {
          "type": "today_sales",
          "totalOrders": 0,
          "totalNightsRooms": 0,
          "currency": "CNY",
          "totalPrice": 0
        },
        {
          "type": "today_checkout_sales",
          "totalOrders": 0,
          "totalNightsRooms": 0,
          "currency": "CNY",
          "totalPrice": 0
        },
        {
          "type": "month_sales",
          "totalOrders": 0,
          "totalNightsRooms": 0,
          "currency": "CNY",
          "totalPrice": 0
        },
        {
          "type": "month_checkout_sales",
          "totalOrders": 0,
          "totalNightsRooms": 0,
          "currency": "CNY",
          "totalPrice": 0
        },
        {
          "type": "year_sales",
          "totalOrders": 0,
          "totalNightsRooms": 0,
          "currency": "CNY",
          "totalPrice": 0
        },
        {
          "type": "total_sales",
          "totalOrders": 0,
          "totalNightsRooms": 0,
          "currency": "CNY",
          "totalPrice": 0
        }
      ],
    }
  },
  computed: {
    ...mapState('setting', ['theme'])
  },
  methods: {
    getTotalSale() {
      this.loading = true
      getTotalSale(new Date()).then(res => {
        this.totalSales = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    getSaleDaily(type) {
      let chartDom = document.getElementById('echart')
      if(myChart === null)
        myChart = echarts.init(chartDom)

      this.chartLoading = true
      getTotalSaleDaily(new Date()).then(res => {
        let list = res.data.data
        let xData = [], yData = []
        let yName = ''
        if (type === 'total') {
          yName = this.$t('statistic.total') + '(CNY)'
          list.forEach(item => {
            xData.push(item.date)
            yData.push(parseInt(item.totalPrice))
          })
        }
        if (type === 'total_orders') {
          yName = this.$t('statistic.total_orders')
          list.forEach(item => {
            xData.push(item.date)
            yData.push(parseInt(item.totalOrders))
          })
        }
        if (type === 'total_nights_rooms') {
          yName = this.$t('statistic.total_nights_rooms')
          list.forEach(item => {
            xData.push(item.date)
            yData.push(parseInt(item.totalNightsRooms))
          })
        }

        let option = {
          color: [this.theme.color],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#0b1e15'
              }
            }
          },
          grid: {
            top: '10%',
            left: '2%',
            right: '5%',
            containLabel: true
          },
          toolbox: {
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              magicType: {show: true, type: ['line', 'bar']},
              saveAsImage: {show: true}
            }
          },
          xAxis: {
            type: 'category',
            axisPointer: {
              type: 'shadow'
            },
            name: this.$t('statistic.sales_date'),
            data: xData
          },
          yAxis: {
            type: 'value',
            name: yName,
          },
          series: [
            {
              data: yData,
              type: 'bar',
              label: {
                show: false,
                rotate: 90,
                distance: 30,
                position: 'insideBottom',
                align: 'left',
                verticalAlign: 'center',
                fontSize: 14,
                formatter: function(params){
                  return formatAmount(params.value, '', 0)
                },
              },
              emphasis: {
                focus: 'series'
              },
            }
          ]
        };

        option && myChart.setOption(option);

        this.chartLoading = false
      }).catch(error => {
        console.log(error)
        this.chartLoading = false
      })
    },
    chartChange(e) {
      this.getSaleDaily(e.target.value)
    }
  },
  created() {
    this.getTotalSale()
  },
  mounted() {
    this.getSaleDaily('total')
  }
}
</script>